<template>
  <div class="personal-space">
    <!-- 左侧导航 -->
    <div class="space-sidebar">
      <a-menu v-model:selectedKeys="selectedKeys" mode="inline" class="space-menu">
        <a-menu-item key="overview" @click="handleMenuClick('overview')">
          <template #icon><DashboardOutlined /></template>
          智能总览
        </a-menu-item>
        <a-menu-item key="ai-tools" @click="handleMenuClick('ai-tools')">
          <template #icon><ToolOutlined /></template>
          AI工具箱
        </a-menu-item>
        <a-menu-item key="ai-assistant" @click="handleMenuClick('ai-assistant')">
          <template #icon><RobotOutlined /></template>
          智能助手
        </a-menu-item>

        <a-menu-item key="ai-chat" @click="handleMenuClick('ai-chat')">
          <template #icon><MessageOutlined /></template>
          智能客服
        </a-menu-item>
        <a-menu-item key="ai-history" @click="handleMenuClick('ai-history')">
          <template #icon><HistoryOutlined /></template>
          智能历史
        </a-menu-item>
      </a-menu>
    </div>
    <!-- 主内容区 -->
    <div class="space-content">
      <div class="content-card">
        <a-spin :spinning="loading">
          <router-view></router-view>
        </a-spin>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import {
    DashboardOutlined,
    RobotOutlined,
    ToolOutlined,
    HistoryOutlined,
    MessageOutlined,
  } from '@ant-design/icons-vue'

  const router = useRouter()
  const route = useRoute()
  const loading = ref(false)
  const selectedKeys = ref<string[]>(['overview'])

  const handleMenuClick = (key: string) => {
    selectedKeys.value = [key]
    router.push(`/intelligent/paradise/${key}`)
  }

  onMounted(() => {
    const path = route.path
    const key = path.split('/').pop() || 'overview'
    selectedKeys.value = [key]
  })
</script>

<style scoped>
  .personal-space {
    display: flex;
    min-height: 100vh;
    background: var(--theme-background);
    transition: all 0.3s ease;
  }
  
  .space-sidebar {
    width: 220px;
    background: var(--theme-surface);
    border-right: 1px solid var(--theme-border);
    padding: 0;
    position: fixed;
    left: 0;
    top: 64px;
    bottom: 0;
    display: flex;
    flex-direction: column;
    z-index: 100;
    box-shadow: 2px 0 12px 0 var(--theme-shadow);
    transition: all 0.3s ease;
  }
  
  .space-menu {
    flex: 1;
    border-right: none;
    margin-top: 18px;
    background: transparent;
  }
  
  :deep(.ant-menu-item) {
    border-radius: 8px;
    margin: 8px 10px;
    font-size: 16px;
    background: var(--theme-background);
    color: var(--theme-text);
    border: 1px solid var(--theme-border);
    transition:
      background 0.3s ease,
      color 0.3s ease,
      box-shadow 0.3s ease,
      border-color 0.3s ease,
      transform 0.2s ease;
  }
  
  :deep(.ant-menu-item-selected) {
    background: var(--theme-primary) !important;
    color: var(--theme-surface) !important;
    box-shadow: 0 2px 8px var(--theme-shadow);
    font-weight: bold;
    border-color: var(--theme-primary);
  }
  
  :deep(.ant-menu-item:hover) {
    background: var(--theme-background) !important;
    color: var(--theme-primary) !important;
    border-color: var(--theme-primary);
    transform: translateX(4px) scale(1.03);
    box-shadow: 0 2px 8px var(--theme-shadow);
  }
  
  :deep(.ant-menu-item .anticon) {
    color: inherit;
    transition: color 0.3s ease;
  }
  
  .space-content {
    flex: 1;
    margin-left: 220px;
    padding: 0;
    min-height: calc(100vh - 64px);
    background: var(--theme-background);
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    transition: all 0.3s ease;
  }
  
  .content-card {
    width: 100%;
    max-width: 100vw;
    min-height: 600px;
    background: var(--theme-surface);
    border-radius: 12px;
    box-shadow: 0 4px 24px 0 var(--theme-shadow);
    padding: 0;
    margin: 0;
    transition: all 0.3s ease;
    animation: fadeIn 0.6s;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    border: 1px solid var(--theme-border);
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  
  /* 深色主题特殊处理 */
  [data-theme="dark"] .space-sidebar {
    background: var(--theme-surface);
    border-right-color: var(--theme-border);
  }
  
  [data-theme="dark"] :deep(.ant-menu-item) {
    background: var(--theme-background);
    color: var(--theme-text);
    border-color: var(--theme-border);
  }
  
  [data-theme="dark"] :deep(.ant-menu-item:hover) {
    background: var(--theme-background);
    color: var(--theme-primary);
    border-color: var(--theme-primary);
  }
</style>
